<template>
	<view>
		<!-- <cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">详情</block>
		</cu-custom> -->
		<view class="text-gray padding justify-center flex align-center" v-if="!pageLoad">
			<u-loading mode="circle" color="#2979ff" size="40"></u-loading>
			<view class="margin-left-sm">加载中...</view>
		</view>
		<view v-if="pageLoad">
			<view class="cu-list menu-avatar">
				<view class="cu-item">
					<!-- 头像 -->
					<view @click="tohis(author._id)" class="cu-avatar round lg">
						<image style="width: 100%;height: 100%;" :src="author.avatar" mode=""></image>
					</view>
					<view class="content flex-sub">
						<view class="jiacu">{{author.ssuserid}}</view>
						<view class="jiacu">{{author.nickname}}</view>
						<view class="text-gray flex justify-between">
							<view class="text-sm jiacu">粉丝：{{fans}} 关注：{{blogger}}</view>
							<view class="margin-right-sm">
								<button v-if="focus == true" @click="cancelFocus"
									class="cu-btn shadow bg-grey sm jiacu">已关注</button>
								<button v-else-if="focus == false" @click="focusOn"
									class="cu-btn shadow bg-red sm jiacu">关注</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 内容 -->
			<view class="cu-card no-card margin-top">
				<view class="padding neibianju">
					<!-- <view class="flex justify-center">
						<view class="text-lg margin-bottom-sm">标题： {{data.input}} </view>
					</view> -->
					<view class="text-content margin-top-sm">
						{{data.value}}
					</view>
					<view class="text-gray flex justify-end"></view>
					<!-- 视频 -->
					<view class="image videoSrc" v-if="data.srcVideo">
						<video :src="data.srcVideo"></video>
					</view>
					<!-- 图片 -->
					<view class="image" v-if="data.imgList.length == 1">
						<image mode="aspectFit" :src="data.imgList[0].imgurl" data-src="0" @tap="openImg">
						</image>
					</view>
					<view class="image" v-if="data.imgList.length > 1">
						<view class="imagesList">
							<image mode="aspectFit" v-for="(itemImg,indexImg) in data.imgList" :key="indexImg"
								:data-src="index" @tap="openImg" :src="itemImg.imgurl"></image>
						</view>
					</view>
					<view class="text-gray flex justify-end">{{data.createTime}}</view>
					<view class="content flex-sub margin-top-sm">
						<view class="text-gray flex justify-around" style="line-height: 1.2;text-align: center;">
							<view @click="loveToggle(data._id)" v-bind:class="islove?'text-red':''">
								<text class="cuIcon-appreciatefill"></text>
								<view class="jiacu">点赞</view>
							</view>
							<view @click="favToggle(data._id)" v-bind:class="isfav?'text-red':''">
								<text class="cuIcon-likefill"></text>
								<view class="jiacu">收藏</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-titles text-blue"></text>
					<view class="jiacu">评论</view>
				</view>

			</view>

			<!-- 评论区域-->
			<cmform ref="cmform" tablename="bbs-topic" :objectid="data._id" class="julidibu"></cmform>
			<!-- 底部栏 -->
			<view class="dibu">
				<view class="text-gray flex justify-around" style="line-height: 1.2;text-align: center;">

					<!-- 评论框 -->
					<uni-search-bar @commentToggle="commentToggle " :radius="100" bgColor="#e5e5e5" cancelButton="false"
						@topinglun="topinglun()"></uni-search-bar>
					<!-- <view @click="commentToggle(data._id)">
						<text class="cuIcon-comment"></text>
						<view class="jiacu">评论</view>
					</view> -->
					<view @click="favToggle(data._id)" v-bind:class="isfav?'text-red':''">
						<text class="cuIcon-likefill"></text>
						<view class="jiacu">收藏</view>
					</view>
					<view @click="loveToggle(data._id)" v-bind:class="islove?'text-red':''">
						<text class="cuIcon-appreciatefill"></text>
						<view class="jiacu">点赞</view>
					</view>
					<!-- <view @click="zhuanfaToggle(data._id)" >
						<u-icon  size="50" name="zhuanfa"></u-icon>
						<view class="jiacu">分享</view>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cmform from "../../components/cmform.vue";
	import {
		mapGetters
	} from 'vuex';
	export default {
		components: {
			cmform
		},
		computed: {
			// ...mapGetters(['userInfo'])
		},
		data: function() {
			return {
				focus: false,
				pageLoad: false,
				author: {},
				data: {},
				id: "",
				islove: false,
				isfav: false,
				fans: 0,
				blogger: 0,
				value: "",
				userInfo: {}
			}
		},
		onShow() {

		},
		onLoad: function(ops) {
			// 传递过来的文章id，根据文章id来查询数据
			this.userInfo = uni.getStorageSync('userInfo')
			this.id = ops.id;
			this.getPage();
			this.addView();
		},
		methods: {
			tohis(yonghuid) {
				uni.navigateTo({
					url: '../../bbs/topic/his?id=' + yonghuid
				})
			},
			zhuanfaToggle() {

			},
			commentToggle() {
				this.$refs.cmform.showpinglun();
			},
			openImg(e) {
				var current = e.target.dataset.src;
				// console.log(current)
				var imageList = []
				for (var index in this.data.imgList) {
					imageList[index] = this.data.imgList[index].imgurl
				}
				uni.previewImage({
					current: current,
					urls: imageList
				});
			},
			focusOn() {
				if (!this.$store.getters.userInfo.username) {
					this.$store.dispatch('autoLogin')
				}
				if (this.author._id == this.userInfo._id) {
					uni.showToast({
						title: '不能关注自己！',
						icon: 'none'
					})
					return
				}
				if (!this.userInfo._id) {
					uni.showToast({
						title: '账号异常',
						icon: 'none'
					})
					return
				}
				var that = this;
				uniCloud.callFunction({
					name: "fans",
					data: {
						action: "add",
						params: {
							bloggerId: this.author._id,
							fansId: this.userInfo._id
						}
					}
				}).then((res) => {
					if (res.success == true) {
						that.focus = true
						uni.showToast({
							title: '关注成功！',
							icon: 'none'
						})
					}
				})
			},
			cancelFocus() {
				var that = this;
				uniCloud.callFunction({
					name: "fans",
					data: {
						action: "cancel",
						params: {
							bloggerId: this.author._id,
							fansId: this.userInfo._id
						}
					}
				}).then((res) => {
					// console.log(res)		
					if (res.success == true) {
						that.focus = false
						uni.showToast({
							title: '取消关注！',
							icon: 'none'
						})
					}
				})
			},
			// 获取数据
			async getPage() {
				var that = this
				await uniCloud.callFunction({
					name: "bbs_topic",
					data: {
						cloudAction: "show",
						params: {
							id: this.id
						}
					}
				}).then((res) => {
					var res = res.result.data;
					that.data = res.data;
					that.author = res.user;
					// console.log(that.author)					
				})
				this.pageLoad = true;
				uniCloud.callFunction({
					name: "love",
					data: {
						cloudAction: "get",
						params: {
							// 文章id
							objectid: this.id,
							tablename: "bbs-topic",
							// 用户id
							ssuserid: this.userInfo._id,
						}
					},
					success: (e) => {
						// console.log("love",e);
						if (e.result.data == 1) {
							that.islove = true;
						} else {
							that.islove = false;
						}
					},
				})

				uniCloud.callFunction({
					name: "fav",
					data: {
						cloudAction: "get",
						params: {
							objectid: this.id,
							tablename: "bbs-topic",
							ssuserid: this.userInfo._id,
						}
					},
					success: (e) => {
						if (e.result.data == 1) {
							that.isfav = true;
						} else {
							that.isfav = false;
						}
					},
				})
				await uniCloud.callFunction({
					name: "fans",
					data: {
						action: "get",
						params: {
							bloggerId: this.author._id,
							fansId: this.userInfo._id
						}
					}
				}).then((res) => {
					if (res.result == 1) {
						that.focus = true
					}
				})

				await uniCloud.callFunction({
					name: "fans",
					data: {
						action: "getfans",
						params: {
							bloggerId: this.author._id,
						}
					}
				}).then((res) => {
					that.fans = res.result
				})
				await uniCloud.callFunction({
					name: "fans",
					data: {
						action: "getblogger",
						params: {
							bloggerId: this.author._id,
						}
					}
				}).then((res) => {
					that.blogger = res.result
				})
			},
			addView() { //记录浏览次数
				var that = this;
				uniCloud.callFunction({
					name: "bbs_topic",
					data: {
						cloudAction: "addView",
						params: {
							id: this.id,
						}
					}
				}).then((res) => {
					// console.log(res)
				})
			},
			favToggle(id) { //收藏or取消收藏
				var that = this;
				var that = this;
				uniCloud.callFunction({
					name: "fav",
					data: {
						cloudAction: "toggle",
						params: {
							objectid: id,
							tablename: "bbs-topic",
							ssuserid: this.userInfo._id,
						}
					},
					success: (e) => {
						if (e.result.data.action == 'add') {
							that.isfav = true;
						} else {
							that.isfav = false;
						}
					},
					fail: (e) => {
						// console.log(e)
					}
				})
			},
			loveToggle(id) { //点赞or取消点赞
				// console.log(id)
				var that = this;
				uniCloud.callFunction({
					name: "love",
					data: {
						cloudAction: "toggle",
						params: {
							objectid: id,
							tablename: "bbs-topic",
							ssuserid: this.userInfo._id,
						}
					},
					success: (e) => {
						if (e.result.data.action == 'add') {
							that.islove = true;
						} else {
							that.islove = false;
						}
					},
					fail: (e) => {
						// console.log(e)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	// page{
	// 	padding-bottom: 45px;
	// }
	.neibianju {
		padding: 5px;
	}

	// 宽屏适配
	@media screen and (min-width: 720px) {
		.dibu {
			position: fixed;
			bottom: 0px;
			width: 720px;
			background-color: #ffffff;
			height: 45px;
			border-top: 1px solid #e8e8e8;
			padding-bottom: 5px;
		}
	}

	@media screen and (max-width: 720px) {
		.dibu {
			position: fixed;
			bottom: 0px;
			width: 100%;
			background-color: #ffffff;
			height: 45px;
			border-top: 1px solid #e8e8e8;
			padding-bottom: 50px;
		}
	}

	.jiacu {}

	.videoSrc {
		width: 100%;

		video {
			width: 100%;
		}
	}
</style>
